<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小米商城 - 精品电商购物平台，提供手机、电脑、家电等优质产品">
    <meta name="keywords" content="小米,电商,购物,数码产品,手机,笔记本,家电">
    <meta name="author" content="小米商城">
    <title>小米电商首页 - 精品数码产品购物平台</title>

    <!-- 预连接和DNS预解析 -->
    <link rel="preconnect" href="https://cdn.cnbj0.fds.api.mi-img.com">
    <link rel="preconnect" href="https://cdn.cnbj1.fds.api.mi-img.com">
    <link rel="dns-prefetch" href="https://unpkg.com">

    <!-- 预加载关键CSS -->
    <link rel="preload" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
        <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    </noscript>

    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">

    <!-- Favicon优化 -->
    <link rel="icon"
        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛒</text></svg>">

    <!-- PWA支持 -->
    <meta name="theme-color" content="#ff6700">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="小米商城">

    <style>
        /* ===== CSS 变量定义 ===== */
        :root {
            /* 颜色系统 */
            --primary-color: #ff6700;
            --primary-hover: #e55a00;
            --primary-light: #ff8533;
            --secondary-color: #f5f5f5;
            --accent-color: #007bff;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;

            /* 文字颜色 */
            --text-primary: #333333;
            --text-secondary: #666666;
            --text-light: #999999;
            --text-white: #ffffff;

            /* 背景颜色 */
            --bg-primary: #ffffff;
            --bg-secondary: #f8f9fa;
            --bg-dark: #1a1a1a;
            --bg-card: #ffffff;

            /* 阴影系统 */
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
            --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.2);

            /* 尺寸系统 */
            --border-radius-sm: 4px;
            --border-radius-md: 8px;
            --border-radius-lg: 12px;
            --border-radius-xl: 16px;

            /* 间距系统 */
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 16px;
            --spacing-lg: 24px;
            --spacing-xl: 32px;
            --spacing-2xl: 48px;

            /* 动画过渡 */
            --transition-fast: 0.15s ease;
            --transition-normal: 0.3s ease;
            --transition-slow: 0.5s ease;

            /* 字体系统 */
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
            --font-size-xs: 14px;
            --font-size-sm: 16px;
            --font-size-md: 18px;
            --font-size-lg: 20px;
            --font-size-xl: 24px;
            --font-size-2xl: 28px;
            --font-size-3xl: 36px;

            /* 容器宽度 */
            --container-sm: 540px;
            --container-md: 720px;
            --container-lg: 960px;
            --container-xl: 1140px;
            --container-2xl: 1320px;
        }

        /* 暗色主题 */
        [data-theme="dark"] {
            --text-primary: #f0f0f0;
            --text-secondary: #cccccc;
            --text-light: #aaaaaa;
            --bg-primary: #1e1e1e;
            --bg-secondary: #2d2d2d;
            --bg-card: #2a2a2a;
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
            --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.6);
        }

        /* ===== 基础重置和设置 ===== */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 16px;
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: var(--font-family);
            font-size: var(--font-size-md);
            line-height: 1.6;
            color: var(--text-primary);
            background-color: var(--bg-secondary);
            transition: color var(--transition-normal), background-color var(--transition-normal);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* ===== 容器系统 ===== */
        .container {
            width: 100%;
            max-width: var(--container-xl);
            margin: 0 auto;
            padding: 0 var(--spacing-md);
        }

        @media (min-width: 576px) {
            .container {
                max-width: var(--container-sm);
            }
        }

        @media (min-width: 768px) {
            .container {
                max-width: var(--container-md);
            }
        }

        @media (min-width: 992px) {
            .container {
                max-width: var(--container-lg);
            }
        }

        @media (min-width: 1200px) {
            .container {
                max-width: var(--container-xl);
            }
        }

        @media (min-width: 1400px) {
            .container {
                max-width: var(--container-2xl);
            }
        }

        /* ===== 头部导航 ===== */
        header {
            background: var(--bg-primary);
            padding: var(--spacing-md) 0;
            box-shadow: var(--shadow-md);
            position: sticky;
            top: 0;
            z-index: 100;
            transition: all var(--transition-normal);
            backdrop-filter: blur(10px);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--spacing-lg);
        }

        .logo {
            font-size: var(--font-size-2xl);
            font-weight: 700;
            color: var(--primary-color);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .logo::before {
            content: "🛒";
            font-size: 1.2em;
        }

        /* 搜索框 */
        .search-container {
            flex: 1;
            max-width: 500px;
            position: relative;
        }

        .search-form {
            display: flex;
            position: relative;
        }

        .search-input {
            width: 100%;
            padding: var(--spacing-sm) var(--spacing-md);
            padding-right: 50px;
            border: 2px solid transparent;
            border-radius: var(--border-radius-lg);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: var(--font-size-md);
            transition: all var(--transition-normal);
        }

        .search-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(255, 103, 0, 0.1);
        }

        .search-btn {
            position: absolute;
            right: var(--spacing-xs);
            top: 50%;
            transform: translateY(-50%);
            background: var(--primary-color);
            color: var(--text-white);
            border: none;
            border-radius: var(--border-radius-md);
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .search-btn:hover {
            background: var(--primary-hover);
        }

        /* 主题切换按钮 */
        .theme-switcher {
            background: var(--primary-color);
            color: var(--text-white);
            border: none;
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--border-radius-md);
            cursor: pointer;
            transition: all var(--transition-normal);
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            font-weight: 500;
        }

        .theme-switcher:hover {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        /* ===== Swiper 轮播图 ===== */
        .swiper-container {
            width: 100%;
            height: 450px;
            margin: var(--spacing-lg) auto;
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            position: relative;
        }

        .swiper-slide {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.6s ease;
        }

        .swiper-slide:hover img {
            transform: scale(1.05);
        }

        /* 轮播图内容层 */
        .slide-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            color: var(--text-white);
            padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
            transform: translateY(0);
            transition: transform var(--transition-normal);
        }

        .swiper-slide:hover .slide-content {
            transform: translateY(-10px);
        }

        .slide-content h3 {
            font-size: var(--font-size-2xl);
            font-weight: 700;
            margin-bottom: var(--spacing-sm);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .slide-content p {
            font-size: var(--font-size-lg);
            opacity: 0.95;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }

        /* Swiper 控制元素 */
        .swiper-pagination-bullet {
            background: rgba(255, 255, 255, 0.7);
            width: 12px;
            height: 12px;
            opacity: 0.7;
            transition: all var(--transition-fast);
        }

        .swiper-pagination-bullet-active {
            background: var(--primary-color);
            opacity: 1;
            transform: scale(1.2);
        }

        .swiper-button-next,
        .swiper-button-prev {
            color: var(--text-white);
            background: rgba(0, 0, 0, 0.3);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            transition: all var(--transition-normal);
        }

        .swiper-button-next:hover,
        .swiper-button-prev:hover {
            background: rgba(0, 0, 0, 0.6);
            transform: scale(1.1);
        }

        .swiper-button-next::after,
        .swiper-button-prev::after {
            font-size: 16px;
            font-weight: 700;
        }

        /* 懒加载预加载器 */
        .swiper-lazy-preloader {
            width: 42px;
            height: 42px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -21px;
            margin-top: -21px;
            z-index: 10;
            transform-origin: 50%;
            animation: swiper-preloader-spin 1s infinite linear;
            box-sizing: border-box;
            border: 4px solid var(--primary-color);
            border-radius: 50%;
            border-top: 4px solid transparent;
        }

        @keyframes swiper-preloader-spin {
            100% {
                transform: rotate(360deg);
            }
        }

        /* ===== 商品网格系统 ===== */
        .products-section {
            padding: var(--spacing-2xl) 0;
        }

        .section-title {
            font-size: var(--font-size-3xl);
            font-weight: 700;
            text-align: center;
            margin-bottom: var(--spacing-2xl);
            color: var(--text-primary);
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: var(--spacing-lg);
            padding: var(--spacing-lg) 0;
        }

        .product-card {
            background: var(--bg-card);
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: all var(--transition-normal);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-hover);
        }

        .product-image {
            width: 100%;
            height: 220px;
            object-fit: cover;
            background: var(--bg-secondary);
            transition: transform var(--transition-normal);
        }

        .product-card:hover .product-image {
            transform: scale(1.05);
        }

        .product-info {
            padding: var(--spacing-md);
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .product-tag {
            position: absolute;
            top: var(--spacing-sm);
            left: 0;
            background: var(--primary-color);
            color: var(--text-white);
            padding: var(--spacing-xs) var(--spacing-md);
            font-size: var(--font-size-xs);
            font-weight: 600;
            border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
            z-index: 2;
        }

        .product-name {
            font-size: var(--font-size-xl);
            font-weight: 600;
            margin-bottom: var(--spacing-sm);
            color: var(--text-primary);
            line-height: 1.4;
        }

        .price-container {
            margin: var(--spacing-sm) 0;
        }

        .current-price {
            color: var(--primary-color);
            font-size: var(--font-size-2xl);
            font-weight: 700;
        }

        .original-price {
            color: var(--text-light);
            margin-left: var(--spacing-sm);
            font-size: var(--font-size-lg);
            text-decoration: line-through;
        }

        .product-rating {
            color: var(--warning-color);
            font-size: var(--font-size-md);
            margin: var(--spacing-sm) 0;
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

        .add-to-cart {
            background: var(--primary-color);
            color: var(--text-white);
            width: 100%;
            padding: var(--spacing-md) var(--spacing-md);
            border: none;
            border-radius: var(--border-radius-md);
            cursor: pointer;
            transition: all var(--transition-normal);
            margin-top: auto;
            font-weight: 600;
            font-size: var(--font-size-lg);
            position: relative;
            overflow: hidden;
        }

        .add-to-cart::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left var(--transition-normal);
        }

        .add-to-cart:hover::before {
            left: 100%;
        }

        .add-to-cart:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
        }

        /* ===== 购物车悬浮按钮 ===== */
        .cart-icon {
            position: fixed;
            right: var(--spacing-lg);
            bottom: var(--spacing-lg);
            width: 60px;
            height: 60px;
            background: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-normal);
            z-index: 99;
            box-shadow: var(--shadow-lg);
            color: var(--text-white);
            font-size: var(--font-size-2xl);
        }

        .cart-icon:hover {
            transform: scale(1.1);
            box-shadow: var(--shadow-hover);
        }

        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--danger-color);
            color: var(--text-white);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-xs);
            font-weight: 700;
        }

        /* ===== 购物车侧边栏 ===== */
        .cart-modal {
            position: fixed;
            top: 0;
            right: -400px;
            width: 400px;
            height: 100vh;
            background: var(--bg-card);
            box-shadow: var(--shadow-lg);
            transition: right var(--transition-normal);
            z-index: 101;
            display: flex;
            flex-direction: column;
        }

        .cart-modal.active {
            right: 0;
        }

        .cart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-lg);
            border-bottom: 1px solid var(--bg-secondary);
            background: var(--bg-primary);
        }

        .cart-header h2 {
            font-size: var(--font-size-xl);
            font-weight: 600;
            color: var(--text-primary);
        }

        .close-cart {
            background: none;
            border: none;
            font-size: var(--font-size-2xl);
            cursor: pointer;
            color: var(--text-secondary);
            transition: color var(--transition-fast);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-cart:hover {
            color: var(--text-primary);
        }

        #cartItems {
            flex: 1;
            overflow-y: auto;
            padding: var(--spacing-md);
        }

        .cart-item {
            display: flex;
            gap: var(--spacing-md);
            padding: var(--spacing-md) 0;
            border-bottom: 1px solid var(--bg-secondary);
        }

        .cart-item-img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: var(--border-radius-md);
            background: var(--bg-secondary);
        }

        .cart-item-info {
            flex: 1;
        }

        .cart-item-title {
            font-size: var(--font-size-md);
            font-weight: 600;
            margin-bottom: var(--spacing-xs);
            color: var(--text-primary);
        }

        .cart-item-price {
            color: var(--primary-color);
            font-weight: 700;
            font-size: var(--font-size-md);
        }

        .cart-item-controls {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            margin-top: var(--spacing-sm);
        }

        .quantity-btn {
            width: 28px;
            height: 28px;
            background: var(--bg-secondary);
            border: 1px solid var(--bg-secondary);
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-fast);
            color: var(--text-primary);
            font-weight: 600;
        }

        .quantity-btn:hover {
            background: var(--primary-color);
            color: var(--text-white);
            border-color: var(--primary-color);
        }

        .quantity-input {
            width: 50px;
            text-align: center;
            border: 1px solid var(--bg-secondary);
            border-radius: var(--border-radius-sm);
            padding: var(--spacing-xs);
            background: var(--bg-primary);
            color: var(--text-primary);
        }

        .remove-item {
            margin-left: auto;
            color: var(--danger-color);
            cursor: pointer;
            font-size: var(--font-size-sm);
            font-weight: 500;
            transition: opacity var(--transition-fast);
        }

        .remove-item:hover {
            opacity: 0.7;
        }

        .cart-total {
            padding: var(--spacing-lg);
            border-top: 1px solid var(--bg-secondary);
            background: var(--bg-primary);
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-sm);
            font-size: var(--font-size-lg);
            font-weight: 700;
            color: var(--text-primary);
        }

        .checkout-btn {
            background: var(--primary-color);
            color: var(--text-white);
            width: 100%;
            padding: var(--spacing-md);
            border: none;
            border-radius: var(--border-radius-md);
            cursor: pointer;
            margin-top: var(--spacing-md);
            font-size: var(--font-size-md);
            font-weight: 600;
            transition: all var(--transition-normal);
        }

        .checkout-btn:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
        }

        .empty-cart {
            text-align: center;
            padding: var(--spacing-2xl);
            color: var(--text-light);
            font-size: var(--font-size-lg);
        }

        /* ===== 遮罩层 ===== */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 100;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--transition-normal);
            backdrop-filter: blur(2px);
        }

        .overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        /* ===== 加载动画 ===== */
        .loading-skeleton {
            background: linear-gradient(90deg, var(--bg-secondary) 25%, transparent 50%, var(--bg-secondary) 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
        }

        @keyframes skeleton-loading {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        /* ===== 购物车动画 ===== */
        .cart-animation {
            position: fixed !important;
            animation: flyToCartParabola 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            z-index: 9999;
            pointer-events: none;
            transform-origin: center;
            border-radius: 50%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        @keyframes flyToCartParabola {
            0% {
                transform: scale(1) translate(0, 0) rotate(0deg);
                opacity: 1;
            }

            20% {
                transform: scale(0.9) translate(var(--deltaX-20), var(--deltaY-20)) rotate(45deg);
                opacity: 0.9;
            }

            40% {
                transform: scale(0.7) translate(var(--deltaX-40), var(--deltaY-40)) rotate(90deg);
                opacity: 0.8;
            }

            60% {
                transform: scale(0.5) translate(var(--deltaX-60), var(--deltaY-60)) rotate(180deg);
                opacity: 0.7;
            }

            80% {
                transform: scale(0.3) translate(var(--deltaX-80), var(--deltaY-80)) rotate(270deg);
                opacity: 0.5;
            }

            100% {
                transform: scale(0.1) translate(var(--deltaX-100), var(--deltaY-100)) rotate(360deg);
                opacity: 0;
            }
        }

        /* 购物车图标抖动动画 */
        .cart-icon.shake {
            animation: cartShake 0.6s ease-in-out;
        }

        @keyframes cartShake {

            0%,
            100% {
                transform: scale(1) rotate(0deg);
            }

            25% {
                transform: scale(1.1) rotate(-5deg);
            }

            50% {
                transform: scale(1.15) rotate(5deg);
            }

            75% {
                transform: scale(1.1) rotate(-3deg);
            }
        }

        /* 成功粒子效果 */
        .success-particle {
            position: fixed;
            pointer-events: none;
            z-index: 10000;
            border-radius: 50%;
            animation: particleExplode 1s ease-out forwards;
        }

        @keyframes particleExplode {
            0% {
                transform: scale(0) translate(0, 0) rotate(0deg);
                opacity: 1;
            }

            50% {
                transform: scale(1.2) translate(var(--finalX, 0px), var(--finalY, 0px)) rotate(180deg);
                opacity: 0.8;
            }

            100% {
                transform: scale(0) translate(calc(var(--finalX, 0px) * 1.5), calc(var(--finalY, 0px) * 1.5)) rotate(360deg);
                opacity: 0;
            }
        }

        /* 添加成功提示动画 */
        .cart-success-indicator {
            position: fixed;
            background: var(--success-color);
            color: var(--text-white);
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--border-radius-lg);
            font-size: var(--font-size-sm);
            font-weight: 600;
            z-index: 10001;
            animation: successPop 1.5s ease-out forwards;
            box-shadow: var(--shadow-lg);
        }

        @keyframes successPop {
            0% {
                transform: scale(0) translateY(20px);
                opacity: 0;
            }

            20% {
                transform: scale(1.1) translateY(0);
                opacity: 1;
            }

            80% {
                transform: scale(1) translateY(0);
                opacity: 1;
            }

            100% {
                transform: scale(0.8) translateY(-10px);
                opacity: 0;
            }
        }

        /* ===== 响应式设计 ===== */
        @media (max-width: 1024px) {
            .container {
                padding: 0 var(--spacing-md);
            }

            .swiper-container {
                height: 350px;
                margin: var(--spacing-md) auto;
            }

            .product-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: var(--spacing-md);
            }

            .slide-content h3 {
                font-size: var(--font-size-xl);
            }

            .slide-content p {
                font-size: var(--font-size-md);
            }
        }

        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: var(--spacing-md);
            }

            .search-container {
                order: 2;
                max-width: 100%;
            }

            .swiper-container {
                height: 250px;
                margin: var(--spacing-md) auto;
                border-radius: var(--border-radius-md);
            }

            .slide-content {
                padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
            }

            .slide-content h3 {
                font-size: var(--font-size-lg);
                margin-bottom: var(--spacing-xs);
            }

            .slide-content p {
                font-size: var(--font-size-sm);
            }

            .swiper-button-next,
            .swiper-button-prev {
                width: 36px;
                height: 36px;
            }

            .swiper-button-next::after,
            .swiper-button-prev::after {
                font-size: 14px;
            }

            .product-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: var(--spacing-sm);
            }

            .cart-modal {
                width: 90vw;
                right: -90vw;
            }

            .cart-icon {
                right: var(--spacing-md);
                bottom: var(--spacing-md);
                width: 50px;
                height: 50px;
            }
        }

        @media (max-width: 480px) {
            .swiper-container {
                height: 200px;
                margin: var(--spacing-sm) auto;
            }

            .slide-content {
                padding: var(--spacing-sm);
            }

            .slide-content h3 {
                font-size: var(--font-size-md);
            }

            .slide-content p {
                font-size: var(--font-size-xs);
            }

            .swiper-button-next,
            .swiper-button-prev {
                display: none;
                /* 在小屏幕上隐藏导航按钮 */
            }

            .product-grid {
                grid-template-columns: 1fr;
            }

            .cart-modal {
                width: 100vw;
                right: -100vw;
            }

            .container {
                padding: 0 var(--spacing-sm);
            }

            .filter-tabs {
                flex-direction: column;
                gap: var(--spacing-xs);
            }

            .filter-tab {
                padding: var(--spacing-sm);
                text-align: center;
            }

            .toast {
                right: 10px;
                left: 10px;
                transform: translateY(-100px);
                max-width: none;
            }

            .toast.show {
                transform: translateY(0);
            }
        }

        /* ===== 无障碍访问 ===== */
        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* 高对比度模式 */
        @media (prefers-contrast: high) {
            :root {
                --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
                --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
                --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
            }
        }

        /* Focus指示器 */
        *:focus-visible {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
            border-radius: var(--border-radius-sm);
        }

        /* 打印样式 */
        @media print {

            .cart-icon,
            .cart-modal,
            .overlay,
            .theme-switcher {
                display: none !important;
            }

            body {
                background: white !important;
                color: black !important;
            }
        }

        /* ===== 筛选标签 ===== */
        .filter-container {
            margin-bottom: var(--spacing-lg);
            text-align: center;
        }

        .filter-tabs {
            display: inline-flex;
            gap: var(--spacing-xs);
            background: var(--bg-card);
            padding: var(--spacing-xs);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-sm);
            flex-wrap: wrap;
            justify-content: center;
        }

        .filter-tab {
            background: transparent;
            border: none;
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--border-radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            color: var(--text-secondary);
            font-weight: 500;
            white-space: nowrap;
        }

        .filter-tab:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .filter-tab.active {
            background: var(--primary-color);
            color: var(--text-white);
        }

        /* ===== 加载更多按钮 ===== */
        .load-more-container {
            text-align: center;
            margin-top: var(--spacing-2xl);
            display: flex;
            gap: var(--spacing-md);
            justify-content: center;
            flex-wrap: wrap;
        }

        .load-more-btn,
        .refresh-images-btn {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: var(--text-white);
            border: none;
            padding: var(--spacing-md) var(--spacing-2xl);
            border-radius: var(--border-radius-lg);
            cursor: pointer;
            transition: all var(--transition-normal);
            font-weight: 600;
            font-size: var(--font-size-md);
            position: relative;
            overflow: hidden;
        }

        .refresh-images-btn {
            background: linear-gradient(135deg, var(--accent-color), #0056b3);
        }

        .load-more-btn::before,
        .refresh-images-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left var(--transition-normal);
        }

        .load-more-btn:hover::before,
        .refresh-images-btn:hover::before {
            left: 100%;
        }

        .load-more-btn:hover,
        .refresh-images-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        /* ===== 消息提示 ===== */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--bg-card);
            color: var(--text-primary);
            padding: var(--spacing-md) var(--spacing-lg);
            border-radius: var(--border-radius-md);
            box-shadow: var(--shadow-lg);
            transform: translateX(400px);
            opacity: 0;
            transition: all var(--transition-normal);
            z-index: 1000;
            max-width: 300px;
            word-wrap: break-word;
        }

        .toast.show {
            transform: translateX(0);
            opacity: 1;
        }

        .toast.success {
            border-left: 4px solid var(--success-color);
        }

        .toast.error {
            border-left: 4px solid var(--danger-color);
        }

        .toast.warning {
            border-left: 4px solid var(--warning-color);
        }

        .toast.info {
            border-left: 4px solid var(--accent-color);
        }

        /* ===== 产品描述样式 ===== */
        .product-description {
            color: var(--text-secondary);
            font-size: var(--font-size-md);
            margin-bottom: var(--spacing-sm);
            line-height: 1.5;
        }

        .rating-text {
            color: var(--text-light);
            font-size: var(--font-size-sm);
        }

        .stars {
            color: var(--warning-color);
            margin-right: var(--spacing-xs);
        }

        /* ===== 清空购物车按钮 ===== */
        .clear-cart-btn {
            background: var(--danger-color);
            color: var(--text-white);
            border: none;
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--border-radius-md);
            cursor: pointer;
            margin-top: var(--spacing-md);
            font-weight: 500;
            transition: all var(--transition-normal);
            width: 100%;
        }

        .clear-cart-btn:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        /* ===== 优化滚动条样式 ===== */
        #cartItems::-webkit-scrollbar {
            width: 6px;
        }

        #cartItems::-webkit-scrollbar-track {
            background: var(--bg-secondary);
        }

        #cartItems::-webkit-scrollbar-thumb {
            background: var(--text-light);
            border-radius: 3px;
        }

        #cartItems::-webkit-scrollbar-thumb:hover {
            background: var(--text-secondary);
        }

        /* ===== 性能优化：硬件加速 ===== */
        .product-card,
        .cart-icon,
        .add-to-cart,
        .theme-switcher {
            will-change: transform;
        }

        /* ===== 预加载动画占位符 ===== */
        .skeleton {
            background: linear-gradient(90deg,
                    var(--bg-secondary) 25%,
                    var(--bg-primary) 50%,
                    var(--bg-secondary) 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
        }

        .skeleton-product {
            height: 400px;
            border-radius: var(--border-radius-lg);
        }

        .skeleton-text {
            height: 16px;
            border-radius: 4px;
            margin-bottom: 8px;
        }

        .skeleton-text.short {
            width: 60%;
        }

        .skeleton-text.long {
            width: 90%;
        }

        /* ===== 深色模式下的特殊样式调整 ===== */
        [data-theme="dark"] .swiper-pagination-bullet {
            background: rgba(255, 255, 255, 0.5);
        }

        [data-theme="dark"] .swiper-pagination-bullet-active {
            background: var(--primary-color);
        }

        [data-theme="dark"] .search-input {
            background: var(--bg-card);
            color: var(--text-primary);
        }

        [data-theme="dark"] .filter-tabs {
            background: var(--bg-card);
        }

        [data-theme="dark"] .product-tag {
            background: var(--primary-color);
        }
    </style>
</head>

<body>
    <header>
        <div class="container header-content">
            <div class="logo">小米商城</div>

            <!-- 搜索框 -->
            <div class="search-container">
                <form class="search-form" role="search">
                    <input type="search" class="search-input" placeholder="搜索商品..." aria-label="搜索商品">
                    <button type="submit" class="search-btn" aria-label="搜索">
                        🔍
                    </button>
                </form>
            </div>

            <button class="theme-switcher" id="themeSwitcher">
                <span class="theme-text">切换主题</span>
            </button>
        </div>
    </header>

    <!-- 轮播图 -->
    <section class="hero-section">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <picture>
                        <source media="(max-width: 768px)" srcset="https://picsum.photos/800/300?random=1">
                        <img data-src="https://picsum.photos/1533/575?random=1" class="swiper-lazy" alt="小米新品发布"
                            loading="eager">
                        <div class="swiper-lazy-preloader"></div>
                    </picture>
                    <div class="slide-content">
                        <h3>小米新品发布</h3>
                        <p>体验科技带来的精彩生活</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <picture>
                        <source media="(max-width: 768px)" srcset="https://picsum.photos/800/300?random=2">
                        <img data-src="https://picsum.photos/1533/575?random=2" class="swiper-lazy" alt="小米笔记本系列"
                            loading="lazy">
                        <div class="swiper-lazy-preloader"></div>
                    </picture>
                    <div class="slide-content">
                        <h3>小米笔记本</h3>
                        <p>轻薄便携，性能强劲</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <picture>
                        <source media="(max-width: 768px)" srcset="https://picsum.photos/800/300?random=3">
                        <img data-src="https://picsum.photos/1533/575?random=3" class="swiper-lazy" alt="小米智能家居"
                            loading="lazy">
                        <div class="swiper-lazy-preloader"></div>
                    </picture>
                    <div class="slide-content">
                        <h3>智能家居</h3>
                        <p>让家更智能，生活更便捷</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <picture>
                        <source media="(max-width: 768px)" srcset="https://picsum.photos/800/300?random=4">
                        <img data-src="https://picsum.photos/1533/575?random=4" class="swiper-lazy" alt="小米手机系列"
                            loading="lazy">
                        <div class="swiper-lazy-preloader"></div>
                    </picture>
                    <div class="slide-content">
                        <h3>小米手机</h3>
                        <p>探索无限可能</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <picture>
                        <source media="(max-width: 768px)" srcset="https://picsum.photos/800/300?random=5">
                        <img data-src="https://picsum.photos/1533/575?random=5" class="swiper-lazy" alt="小米电视系列"
                            loading="lazy">
                        <div class="swiper-lazy-preloader"></div>
                    </picture>
                    <div class="slide-content">
                        <h3>小米电视</h3>
                        <p>超清画质，沉浸体验</p>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>

    <!-- 主要内容区域 -->
    <main class="products-section">
        <div class="container">
            <h2 class="section-title">热门商品</h2>

            <!-- 商品筛选 -->
            <div class="filter-container">
                <div class="filter-tabs" role="tablist">
                    <button class="filter-tab active" role="tab" data-category="all" aria-selected="true">
                        全部商品
                    </button>
                    <button class="filter-tab" role="tab" data-category="phone" aria-selected="false">
                        手机
                    </button>
                    <button class="filter-tab" role="tab" data-category="laptop" aria-selected="false">
                        笔记本
                    </button>
                    <button class="filter-tab" role="tab" data-category="tv" aria-selected="false">
                        电视
                    </button>
                    <button class="filter-tab" role="tab" data-category="audio" aria-selected="false">
                        音频
                    </button>
                </div>
            </div>

            <!-- 商品网格 -->
            <div id="productList" class="product-grid supports-grid" role="main" aria-label="商品列表">
                <!-- 商品将通过JavaScript动态加载 -->
            </div>

            <!-- 加载更多 -->
            <div class="load-more-container">
                <button class="load-more-btn" id="loadMoreBtn">
                    加载更多商品
                </button>
                <button class="refresh-images-btn" id="refreshImagesBtn">
                    🔄 刷新图片
                </button>
            </div>
        </div>
    </main>

    <!-- 购物车悬浮按钮 -->
    <div class="cart-icon" id="cartIcon" role="button" tabindex="0" aria-label="购物车">
        🛒
        <span class="cart-count" id="cartCount">0</span>
    </div>

    <!-- 购物车侧边栏 -->
    <aside class="cart-modal" id="cartModal" role="dialog" aria-labelledby="cart-title" aria-hidden="true">
        <div class="cart-header">
            <h2 id="cart-title">购物车</h2>
            <button class="close-cart" id="closeCart" aria-label="关闭购物车">×</button>
        </div>
        <div id="cartItems"></div>
        <div class="cart-total">
            <div class="total-row">
                总计: <span id="cartTotal">¥0</span>
            </div>
        </div>
        <button class="checkout-btn" id="checkoutBtn">立即结算</button>
    </aside>

    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>

    <!-- 消息提示 -->
    <div class="toast" id="toast" role="alert" aria-live="polite"></div>

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script>
        // ===== 数据和状态管理 =====
        const APP_CONFIG = {
            STORAGE_KEYS: {
                CART: 'xiaomi-cart',
                THEME: 'xiaomi-theme',
                VIEWED_PRODUCTS: 'xiaomi-viewed'
            },
            DEBOUNCE_DELAY: 300,
            ANIMATION_DURATION: 300,
            ITEMS_PER_PAGE: 12
        };

        // 扩展的小米产品数据
        const miProducts = [
            {
                id: 1,
                img: "https://picsum.photos/300/200?random=101",
                name: "Xiaomi 13 Pro",
                price: 5799,
                oldPrice: 6299,
                tag: "新品",
                category: "phone",
                rating: 4.8,
                reviews: 1245,
                description: "徕卡光学镜头，骁龙8 Gen 2"
            },
            {
                id: 2,
                img: "https://picsum.photos/300/200?random=102",
                name: "Xiaomi Book Pro 16",
                price: 6999,
                oldPrice: 7499,
                tag: "热卖",
                category: "laptop",
                rating: 4.7,
                reviews: 856,
                description: "2.5K高清屏，12代英特尔处理器"
            },
            {
                id: 3,
                img: "https://picsum.photos/300/200?random=103",
                name: "小米电视6 OLED 55英寸",
                price: 8999,
                oldPrice: 9999,
                tag: "优惠",
                category: "tv",
                rating: 4.9,
                reviews: 567,
                description: "OLED自发光，支持杜比视界"
            },
            {
                id: 4,
                img: "https://picsum.photos/300/200?random=104",
                name: "小米真无线蓝牙耳机4 Pro",
                price: 899,
                oldPrice: 999,
                tag: "爆款",
                category: "audio",
                rating: 4.6,
                reviews: 2341,
                description: "主动降噪，35小时续航"
            },
            {
                id: 5,
                img: "https://picsum.photos/300/200?random=105",
                name: "RedmiBook Pro 15",
                price: 2999,
                oldPrice: 3499,
                tag: "新品",
                category: "laptop",
                rating: 4.5,
                reviews: 433,
                description: "轻薄本，11代处理器"
            },
            {
                id: 6,
                img: "https://picsum.photos/300/200?random=106",
                name: "Xiaomi 14 Ultra",
                price: 6499,
                oldPrice: 6999,
                tag: "限量",
                category: "phone",
                rating: 4.9,
                reviews: 789,
                description: "专业摄影，1英寸大底"
            },
            {
                id: 7,
                img: "https://picsum.photos/300/200?random=107",
                name: "小米电视 ES 43英寸",
                price: 1299,
                oldPrice: 1599,
                tag: "特价",
                category: "tv",
                rating: 4.4,
                reviews: 1876,
                description: "4K超高清，智能语音"
            },
            {
                id: 8,
                img: "https://picsum.photos/300/200?random=108",
                name: "小米音响",
                price: 199,
                oldPrice: 299,
                tag: "促销",
                category: "audio",
                rating: 4.3,
                reviews: 2567,
                description: "360度环绕音效"
            },
            {
                id: 9,
                img: "https://picsum.photos/300/200?random=109",
                name: "Xiaomi 13T Pro",
                price: 4299,
                oldPrice: 4799,
                tag: "热销",
                category: "phone",
                rating: 4.7,
                reviews: 982,
                description: "天玑9200+处理器，144Hz屏幕"
            },
            {
                id: 10,
                img: "https://picsum.photos/300/200?random=110",
                name: "小米笔记本Air 13.3",
                price: 3499,
                oldPrice: 3999,
                tag: "轻薄",
                category: "laptop",
                rating: 4.6,
                reviews: 654,
                description: "超轻薄设计，续航持久"
            },
            {
                id: 11,
                img: "https://picsum.photos/300/200?random=111",
                name: "小米电视 Master 75英寸",
                price: 12999,
                oldPrice: 14999,
                tag: "旗舰",
                category: "tv",
                rating: 4.9,
                reviews: 234,
                description: "Mini LED背光，120Hz刷新率"
            },
            {
                id: 12,
                img: "https://picsum.photos/300/200?random=112",
                name: "小米降噪耳机 Pro",
                price: 1299,
                oldPrice: 1499,
                tag: "降噪",
                category: "audio",
                rating: 4.8,
                reviews: 1567,
                description: "40dB主动降噪，Hi-Res音质"
            },
            {
                id: 13,
                img: "https://picsum.photos/300/200?random=113",
                name: "Redmi Note 12 Pro",
                price: 1699,
                oldPrice: 1999,
                tag: "性价比",
                category: "phone",
                rating: 4.5,
                reviews: 3456,
                description: "天玑1080处理器，5000mAh大电池"
            },
            {
                id: 14,
                img: "https://picsum.photos/300/200?random=114",
                name: "小米游戏本 15.6英寸",
                price: 5999,
                oldPrice: 6699,
                tag: "游戏",
                category: "laptop",
                rating: 4.7,
                reviews: 445,
                description: "RTX 4060显卡，144Hz电竞屏"
            },
            {
                id: 15,
                img: "https://picsum.photos/300/200?random=115",
                name: "小米投影仪 2S",
                price: 2899,
                oldPrice: 3299,
                tag: "投影",
                category: "tv",
                rating: 4.6,
                reviews: 567,
                description: "1080P分辨率，自动对焦"
            },
            {
                id: 16,
                img: "https://picsum.photos/300/200?random=116",
                name: "小米蓝牙音箱 Mini",
                price: 149,
                oldPrice: 199,
                tag: "便携",
                category: "audio",
                rating: 4.4,
                reviews: 2890,
                description: "小巧便携，清澈音质"
            }
        ];

        // ===== 状态管理 =====
        class AppState {
            constructor() {
                this.cart = this.loadFromStorage(APP_CONFIG.STORAGE_KEYS.CART, []);
                this.theme = this.loadFromStorage(APP_CONFIG.STORAGE_KEYS.THEME, 'light');
                this.currentFilter = 'all';
                this.searchQuery = '';
                this.currentPage = 1;
                this.filteredProducts = miProducts;
            }

            loadFromStorage(key, defaultValue) {
                try {
                    const stored = localStorage.getItem(key);
                    return stored ? JSON.parse(stored) : defaultValue;
                } catch (error) {
                    console.error(`加载 ${key} 时出错:`, error);
                    return defaultValue;
                }
            }

            saveToStorage(key, value) {
                try {
                    localStorage.setItem(key, JSON.stringify(value));
                } catch (error) {
                    console.error(`保存 ${key} 时出错:`, error);
                }
            }

            updateCart(cart) {
                this.cart = cart;
                this.saveToStorage(APP_CONFIG.STORAGE_KEYS.CART, cart);
            }

            updateTheme(theme) {
                this.theme = theme;
                this.saveToStorage(APP_CONFIG.STORAGE_KEYS.THEME, theme);
                document.documentElement.setAttribute('data-theme', theme);
            }
        }

        // ===== 工具函数 =====
        const Utils = {
            debounce(func, wait) {
                let timeout;
                return function executedFunction(...args) {
                    const later = () => {
                        clearTimeout(timeout);
                        func(...args);
                    };
                    clearTimeout(timeout);
                    timeout = setTimeout(later, wait);
                };
            },

            throttle(func, limit) {
                let inThrottle;
                return function () {
                    const args = arguments;
                    const context = this;
                    if (!inThrottle) {
                        func.apply(context, args);
                        inThrottle = true;
                        setTimeout(() => inThrottle = false, limit);
                    }
                }
            },

            formatPrice(price) {
                return `¥${price.toLocaleString('zh-CN', { minimumFractionDigits: 0 })}`;
            },

            showToast(message, type = 'success') {
                const toast = document.getElementById('toast');
                toast.textContent = message;
                toast.className = `toast show ${type}`;

                setTimeout(() => {
                    toast.className = 'toast';
                }, 3000);
            },

            generateStars(rating) {
                const fullStars = Math.floor(rating);
                const hasHalfStar = rating % 1 !== 0;
                let stars = '★'.repeat(fullStars);
                if (hasHalfStar) stars += '☆';
                stars += '☆'.repeat(5 - Math.ceil(rating));
                return stars;
            }
        };

        // ===== 购物车管理 =====
        class CartManager {
            constructor(state) {
                this.state = state;
            }

            addItem(productId, quantity = 1) {
                const product = miProducts.find(p => p.id === productId);
                if (!product) return false;

                const existingItem = this.state.cart.find(item => item.id === productId);

                if (existingItem) {
                    existingItem.quantity += quantity;
                } else {
                    this.state.cart.push({ id: productId, quantity });
                }

                this.state.updateCart(this.state.cart);
                this.updateUI();

                Utils.showToast(`${product.name} 已加入购物车`);
                return true;
            }

            removeItem(productId) {
                const itemIndex = this.state.cart.findIndex(item => item.id === productId);
                if (itemIndex > -1) {
                    const product = miProducts.find(p => p.id === productId);
                    this.state.cart.splice(itemIndex, 1);
                    this.state.updateCart(this.state.cart);
                    this.updateUI();
                    Utils.showToast(`${product.name} 已从购物车移除`, 'info');
                }
            }

            updateQuantity(productId, quantity) {
                const item = this.state.cart.find(item => item.id === productId);
                if (item) {
                    if (quantity <= 0) {
                        this.removeItem(productId);
                    } else {
                        item.quantity = quantity;
                        this.state.updateCart(this.state.cart);
                        this.updateUI();
                    }
                }
            }

            clearCart() {
                this.state.updateCart([]);
                this.updateUI();
                Utils.showToast('购物车已清空', 'info');
            }

            getTotalPrice() {
                return this.state.cart.reduce((total, item) => {
                    const product = miProducts.find(p => p.id === item.id);
                    return total + (product ? product.price * item.quantity : 0);
                }, 0);
            }

            getTotalItems() {
                return this.state.cart.reduce((total, item) => total + item.quantity, 0);
            }

            updateUI() {
                this.updateCartCount();
                this.renderCartItems();
                this.updateCartTotal();
            }

            updateCartCount() {
                const count = this.getTotalItems();
                const cartCountEl = document.getElementById('cartCount');
                cartCountEl.textContent = count;
                cartCountEl.style.display = count > 0 ? 'flex' : 'none';
            }

            renderCartItems() {
                const cartItemsContainer = document.getElementById('cartItems');

                if (this.state.cart.length === 0) {
                    cartItemsContainer.innerHTML = `
                        <div class="empty-cart">
                            <p>购物车为空</p>
                            <p>快去选购心仪的商品吧！</p>
                        </div>
                    `;
                    return;
                }

                const itemsHTML = this.state.cart.map(item => {
                    const product = miProducts.find(p => p.id === item.id);
                    if (!product) return '';

                    return `
                        <div class="cart-item" data-product-id="${product.id}">
                            <img src="${product.img}" class="cart-item-img" alt="${product.name}" loading="lazy">
                            <div class="cart-item-info">
                                <div class="cart-item-title">${product.name}</div>
                                <div class="cart-item-price">${Utils.formatPrice(product.price)}</div>
                                <div class="cart-item-controls">
                                    <button class="quantity-btn minus" data-id="${product.id}" aria-label="减少数量">-</button>
                                    <input type="number" class="quantity-input" value="${item.quantity}" min="1" max="99" data-id="${product.id}" aria-label="商品数量">
                                    <button class="quantity-btn plus" data-id="${product.id}" aria-label="增加数量">+</button>
                                    <button class="remove-item" data-id="${product.id}" aria-label="删除商品">删除</button>
                                </div>
                            </div>
                        </div>
                    `;
                }).join('');

                cartItemsContainer.innerHTML = itemsHTML;
                this.bindCartEvents();
            }

            updateCartTotal() {
                const total = this.getTotalPrice();
                const cartTotalEl = document.getElementById('cartTotal');
                cartTotalEl.textContent = Utils.formatPrice(total);
            }

            bindCartEvents() {
                // 数量调整事件
                document.querySelectorAll('.quantity-btn.minus').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const productId = parseInt(e.target.dataset.id);
                        const currentItem = this.state.cart.find(item => item.id === productId);
                        if (currentItem) {
                            this.updateQuantity(productId, currentItem.quantity - 1);
                        }
                    });
                });

                document.querySelectorAll('.quantity-btn.plus').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const productId = parseInt(e.target.dataset.id);
                        const currentItem = this.state.cart.find(item => item.id === productId);
                        if (currentItem) {
                            this.updateQuantity(productId, currentItem.quantity + 1);
                        }
                    });
                });

                document.querySelectorAll('.quantity-input').forEach(input => {
                    input.addEventListener('change', (e) => {
                        const productId = parseInt(e.target.dataset.id);
                        const quantity = parseInt(e.target.value) || 1;
                        this.updateQuantity(productId, quantity);
                    });
                });

                document.querySelectorAll('.remove-item').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const productId = parseInt(e.target.dataset.id);
                        this.removeItem(productId);
                    });
                });
            }
        }

        // ===== 产品渲染管理 =====
        class ProductRenderer {
            constructor(state) {
                this.state = state;
                this.container = document.getElementById('productList');
                this.loadMoreBtn = document.getElementById('loadMoreBtn');
            }

            renderProducts(products = null, append = false) {
                const productsToRender = products || this.state.filteredProducts;
                const startIndex = append ? (this.state.currentPage - 1) * APP_CONFIG.ITEMS_PER_PAGE : 0;
                const endIndex = startIndex + APP_CONFIG.ITEMS_PER_PAGE;
                const currentPageProducts = productsToRender.slice(startIndex, endIndex);

                const productsHTML = currentPageProducts.map(product => this.createProductHTML(product)).join('');

                if (append) {
                    this.container.insertAdjacentHTML('beforeend', productsHTML);
                } else {
                    this.container.innerHTML = productsHTML;
                }

                // 更新加载更多按钮状态
                this.updateLoadMoreButton(productsToRender, endIndex);

                // 懒加载图片
                this.lazyLoadImages();

                // 绑定事件
                this.bindProductEvents();
            }

            createProductHTML(product) {
                return `
                    <article class="product-card" data-product-id="${product.id}" data-category="${product.category}">
                        <div class="product-tag">${product.tag}</div>
                        <img 
                            data-src="${product.img}" 
                            class="product-image lazy-img" 
                            alt="${product.name}"
                            loading="lazy"
                        >
                        <div class="product-info">
                            <h3 class="product-name">${product.name}</h3>
                            <p class="product-description">${product.description}</p>
                            <div class="price-container">
                                <span class="current-price">${Utils.formatPrice(product.price)}</span>
                                <del class="original-price">${Utils.formatPrice(product.oldPrice)}</del>
                            </div>
                            <div class="product-rating">
                                <span class="stars">${Utils.generateStars(product.rating)}</span>
                                <span class="rating-text">${product.rating}分 (${product.reviews}评价)</span>
                            </div>
                            <button class="add-to-cart" data-id="${product.id}" aria-label="加入购物车 ${product.name}">
                                加入购物车
                            </button>
                        </div>
                    </article>
                `;
            }

            updateLoadMoreButton(products, currentEndIndex) {
                if (currentEndIndex >= products.length) {
                    this.loadMoreBtn.style.display = 'none';
                } else {
                    this.loadMoreBtn.style.display = 'block';
                }
            }

            lazyLoadImages() {
                const images = this.container.querySelectorAll('.lazy-img:not([src])');
                const imageObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const img = entry.target;
                            img.src = img.dataset.src;
                            img.classList.remove('lazy-img');
                            observer.unobserve(img);
                        }
                    });
                }, { rootMargin: '50px' });

                images.forEach(img => imageObserver.observe(img));
            }

            bindProductEvents() {
                // 添加到购物车事件
                this.container.querySelectorAll('.add-to-cart').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const productId = parseInt(e.target.dataset.id);
                        this.animateAddToCart(e, productId);
                        cartManager.addItem(productId);
                    });
                });
            }

            animateAddToCart(event, productId) {
                const product = miProducts.find(p => p.id === productId);
                const cartIcon = document.getElementById('cartIcon');
                const cartRect = cartIcon.getBoundingClientRect();
                const buttonRect = event.target.getBoundingClientRect();

                // 创建动画元素
                const animatedImg = document.createElement('img');
                animatedImg.src = product.img;
                animatedImg.className = 'cart-animation';

                // 计算起始和结束位置
                const startX = buttonRect.left + buttonRect.width / 2;
                const startY = buttonRect.top + buttonRect.height / 2;
                const endX = cartRect.left + cartRect.width / 2;
                const endY = cartRect.top + cartRect.height / 2;

                // 计算距离
                const deltaX = endX - startX;
                const deltaY = endY - startY;

                // 设置起始位置
                animatedImg.style.cssText = `
                    width: 50px;
                    height: 50px;
                    position: fixed;
                    left: ${startX - 25}px;
                    top: ${startY - 25}px;
                    border-radius: 50%;
                    z-index: 9999;
                `;

                // 计算抛物线路径的各个关键点
                // 创建向上弧形轨迹
                const controlPointY = Math.min(startY, endY) - 150; // 控制点高度

                // 设置CSS变量用于动画的各个阶段
                this.setParabolaPath(deltaX, deltaY, controlPointY - startY);

                document.body.appendChild(animatedImg);

                // 创建粒子效果
                this.createParticleEffect(startX, startY);

                // 触发购物车图标抖动
                cartIcon.classList.add('shake');
                setTimeout(() => {
                    cartIcon.classList.remove('shake');
                }, 600);

                // 显示成功提示
                setTimeout(() => {
                    this.showSuccessIndicator(endX, endY, product.name);
                }, 800);

                // 清理动画元素
                setTimeout(() => {
                    if (animatedImg.parentNode) {
                        animatedImg.remove();
                    }
                }, 1200);
            }

            // 设置抛物线路径的CSS变量
            setParabolaPath(deltaX, deltaY, peakOffset) {
                const root = document.documentElement;

                // 计算抛物线上各点的位置
                for (let i = 20; i <= 100; i += 20) {
                    const t = i / 100; // 时间比例 (0 到 1)

                    // 抛物线公式：先上升后下降
                    const parabolaY = peakOffset * 4 * t * (1 - t); // 抛物线高度变化
                    const currentX = deltaX * t; // X轴线性变化
                    const currentY = deltaY * t + parabolaY; // Y轴抛物线变化

                    root.style.setProperty(`--deltaX-${i}`, `${currentX}px`);
                    root.style.setProperty(`--deltaY-${i}`, `${currentY}px`);
                }
            }

            // 创建粒子爆炸效果
            createParticleEffect(x, y) {
                const colors = ['#ff6700', '#ffa500', '#ffb84d', '#ff8533'];
                const particleCount = 8;

                for (let i = 0; i < particleCount; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'success-particle';

                    const size = Math.random() * 8 + 4;
                    const color = colors[Math.floor(Math.random() * colors.length)];
                    const angle = (360 / particleCount) * i;
                    const distance = Math.random() * 60 + 30;

                    particle.style.cssText = `
                        width: ${size}px;
                        height: ${size}px;
                        background: ${color};
                        left: ${x - size / 2}px;
                        top: ${y - size / 2}px;
                        --finalX: ${Math.cos(angle * Math.PI / 180) * distance}px;
                        --finalY: ${Math.sin(angle * Math.PI / 180) * distance}px;
                    `;

                    document.body.appendChild(particle);

                    // 清理粒子
                    setTimeout(() => {
                        if (particle.parentNode) {
                            particle.remove();
                        }
                    }, 1000);
                }
            }

            // 显示成功指示器
            showSuccessIndicator(x, y, productName) {
                const indicator = document.createElement('div');
                indicator.className = 'cart-success-indicator';
                indicator.textContent = `✓ ${productName} 已添加`;

                indicator.style.cssText = `
                    left: ${x - 80}px;
                    top: ${y - 40}px;
                `;

                document.body.appendChild(indicator);

                // 清理指示器
                setTimeout(() => {
                    if (indicator.parentNode) {
                        indicator.remove();
                    }
                }, 1500);
            }

            filterProducts(category, searchQuery = '') {
                let filtered = miProducts;

                // 分类筛选
                if (category !== 'all') {
                    filtered = filtered.filter(product => product.category === category);
                }

                // 搜索筛选
                if (searchQuery) {
                    const query = searchQuery.toLowerCase();
                    filtered = filtered.filter(product =>
                        product.name.toLowerCase().includes(query) ||
                        product.description.toLowerCase().includes(query)
                    );
                }

                this.state.filteredProducts = filtered;
                this.state.currentPage = 1;
                this.renderProducts();
            }

            loadMore() {
                this.state.currentPage++;
                this.renderProducts(null, true);
            }
        }

        // ===== 应用初始化 =====
        class App {
            constructor() {
                this.state = new AppState();
                this.cartManager = new CartManager(this.state);
                this.productRenderer = new ProductRenderer(this.state);
                this.swiper = null;

                this.init();
            }

            init() {
                this.initTheme();
                this.initSwiper();
                this.bindEvents();
                this.handleImageError();
                this.productRenderer.renderProducts();
                this.cartManager.updateUI();

                // 性能监控
                this.measurePerformance();
            }

            initTheme() {
                document.documentElement.setAttribute('data-theme', this.state.theme);
            }

            initSwiper() {
                this.swiper = new Swiper('.swiper-container', {
                    // 基础设置
                    loop: true,
                    centeredSlides: true,
                    slidesPerView: 1,
                    spaceBetween: 0,

                    // 自动播放
                    autoplay: {
                        delay: 4000,
                        disableOnInteraction: false,
                        pauseOnMouseEnter: true
                    },

                    // 分页器
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                        bulletClass: 'swiper-pagination-bullet',
                        bulletActiveClass: 'swiper-pagination-bullet-active'
                    },

                    // 导航按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

                    // 懒加载配置
                    lazy: {
                        loadPrevNext: true,
                        loadPrevNextAmount: 2,
                        loadOnTransitionStart: true,
                        elementClass: 'swiper-lazy',
                        loadingClass: 'swiper-lazy-loading',
                        loadedClass: 'swiper-lazy-loaded',
                        preloaderClass: 'swiper-lazy-preloader'
                    },

                    // 动画效果
                    speed: 800,
                    effect: 'slide',

                    // 触摸设置
                    touchEventsTarget: 'container',
                    simulateTouch: true,
                    grabCursor: true,

                    // 响应式断点
                    breakpoints: {
                        768: {
                            autoplay: {
                                delay: 3000
                            }
                        }
                    },

                    // 事件回调
                    on: {
                        init: () => {
                            console.log('轮播图初始化完成');
                        },
                        slideChange: () => {
                            // 重新加载当前和下一张图片
                            this.reloadLazyImages();
                        },
                        lazyImageLoad: (swiper, slideEl, imageEl) => {
                            console.log('图片懒加载完成:', imageEl.alt);
                        },
                        lazyImageReady: (swiper, slideEl, imageEl) => {
                            // 图片加载完成后的淡入效果
                            imageEl.style.opacity = '0';
                            setTimeout(() => {
                                imageEl.style.transition = 'opacity 0.5s ease';
                                imageEl.style.opacity = '1';
                            }, 50);
                        }
                    }
                });

                // 启动持续懒加载
                this.startContinuousLazyLoad();
            }

            // 重新加载懒加载图片
            reloadLazyImages() {
                if (this.swiper) {
                    // 强制重新加载懒加载图片
                    this.swiper.lazy.load();

                    // 预加载下一组图片
                    setTimeout(() => {
                        this.swiper.lazy.loadInSlide(this.swiper.activeIndex + 1);
                        this.swiper.lazy.loadInSlide(this.swiper.activeIndex + 2);
                    }, 100);
                }
            }

            // 启动持续懒加载
            startContinuousLazyLoad() {
                // 每10秒检查并重新加载轮播图图片
                setInterval(() => {
                    if (this.swiper && this.swiper.lazy) {
                        this.reloadLazyImages();

                        // 随机更新图片URL以实现"重复懒加载"
                        this.updateSlideImages();
                    }
                }, 10000);

                // 每15秒更新商品图片，实现循环懒加载
                setInterval(() => {
                    this.updateProductImages();
                }, 15000);
            }

            // 更新轮播图图片（实现重复懒加载效果）
            updateSlideImages() {
                const slides = document.querySelectorAll('.swiper-slide img[data-src]');
                slides.forEach((img, index) => {
                    const randomNum = Math.floor(Math.random() * 1000) + 10;
                    const currentSrc = img.getAttribute('data-src');

                    // 更新图片URL，添加时间戳确保重新加载
                    if (currentSrc.includes('picsum.photos')) {
                        const newSrc = `https://picsum.photos/1533/575?random=${randomNum}`;
                        img.setAttribute('data-src', newSrc);

                        // 重置懒加载状态
                        img.classList.remove('swiper-lazy-loaded');
                        img.classList.add('swiper-lazy');

                        // 如果是当前显示的图片，立即加载
                        if (img.closest('.swiper-slide-active')) {
                            img.src = newSrc;
                        }
                    }
                });

                console.log('轮播图图片已更新，实现重复懒加载');
            }

            // 更新商品图片（实现商品图片循环懒加载）
            updateProductImages() {
                const productImages = document.querySelectorAll('.product-image');
                productImages.forEach((img, index) => {
                    const randomNum = Math.floor(Math.random() * 1000) + 200; // 避免与轮播图重复
                    const newSrc = `https://picsum.photos/300/200?random=${randomNum}`;

                    // 添加淡出效果
                    img.style.transition = 'opacity 0.3s ease';
                    img.style.opacity = '0.3';

                    // 延迟加载新图片
                    setTimeout(() => {
                        img.src = newSrc;
                        img.onload = () => {
                            img.style.opacity = '1';
                        };
                    }, index * 100); // 错开加载时间，创建波浪效果
                });

                console.log('商品图片已更新，实现循环懒加载效果');
            }

            // 图片错误处理
            handleImageError() {
                // 为所有图片添加错误处理
                document.addEventListener('error', (e) => {
                    if (e.target.tagName === 'IMG') {
                        const img = e.target;
                        const randomNum = Math.floor(Math.random() * 1000) + 1;

                        // 如果是轮播图图片，使用备用图片
                        if (img.closest('.swiper-slide')) {
                            img.src = `https://picsum.photos/1533/575?random=${randomNum}`;
                        }
                        // 如果是商品图片，使用备用图片
                        else if (img.closest('.product-card')) {
                            img.src = `https://picsum.photos/300/200?random=${randomNum}`;
                        }

                        console.log('图片加载失败，已使用备用图片');
                    }
                }, true);
            }

            bindEvents() {
                // 主题切换
                document.getElementById('themeSwitcher').addEventListener('click', () => {
                    const newTheme = this.state.theme === 'light' ? 'dark' : 'light';
                    this.state.updateTheme(newTheme);
                });

                // 购物车开关
                document.getElementById('cartIcon').addEventListener('click', this.toggleCart.bind(this));
                document.getElementById('closeCart').addEventListener('click', this.closeCart.bind(this));
                document.getElementById('overlay').addEventListener('click', this.closeCart.bind(this));

                // 搜索功能
                const searchInput = document.querySelector('.search-input');
                searchInput.addEventListener('input', Utils.debounce((e) => {
                    this.state.searchQuery = e.target.value;
                    this.productRenderer.filterProducts(this.state.currentFilter, this.state.searchQuery);
                }, APP_CONFIG.DEBOUNCE_DELAY));

                // 分类筛选
                document.querySelectorAll('.filter-tab').forEach(tab => {
                    tab.addEventListener('click', (e) => {
                        document.querySelectorAll('.filter-tab').forEach(t => {
                            t.classList.remove('active');
                            t.setAttribute('aria-selected', 'false');
                        });
                        e.target.classList.add('active');
                        e.target.setAttribute('aria-selected', 'true');

                        this.state.currentFilter = e.target.dataset.category;
                        this.productRenderer.filterProducts(this.state.currentFilter, this.state.searchQuery);
                    });
                });

                // 加载更多
                document.getElementById('loadMoreBtn').addEventListener('click', () => {
                    this.productRenderer.loadMore();
                });

                // 手动刷新图片
                document.getElementById('refreshImagesBtn').addEventListener('click', () => {
                    this.updateProductImages();
                    this.updateSlideImages();
                    Utils.showToast('图片已刷新！', 'success');
                });

                // 结算
                document.getElementById('checkoutBtn').addEventListener('click', this.checkout.bind(this));

                // 键盘导航
                this.bindKeyboardEvents();

                // 滚动优化
                this.bindScrollEvents();
            }

            bindKeyboardEvents() {
                document.addEventListener('keydown', (e) => {
                    // ESC 关闭购物车
                    if (e.key === 'Escape') {
                        this.closeCart();
                    }

                    // Enter 键激活按钮
                    if (e.key === 'Enter' && e.target.role === 'button') {
                        e.target.click();
                    }
                });
            }

            bindScrollEvents() {
                let ticking = false;

                window.addEventListener('scroll', () => {
                    if (!ticking) {
                        requestAnimationFrame(() => {
                            const scrolled = window.pageYOffset;
                            const header = document.querySelector('header');

                            // 头部阴影效果
                            if (scrolled > 50) {
                                header.style.boxShadow = 'var(--shadow-lg)';
                            } else {
                                header.style.boxShadow = 'var(--shadow-md)';
                            }

                            ticking = false;
                        });

                        ticking = true;
                    }
                });
            }

            toggleCart() {
                const cartModal = document.getElementById('cartModal');
                const overlay = document.getElementById('overlay');
                const isActive = cartModal.classList.contains('active');

                if (isActive) {
                    this.closeCart();
                } else {
                    cartModal.classList.add('active');
                    overlay.classList.add('active');
                    cartModal.setAttribute('aria-hidden', 'false');
                    document.body.style.overflow = 'hidden';
                }
            }

            closeCart() {
                const cartModal = document.getElementById('cartModal');
                const overlay = document.getElementById('overlay');

                cartModal.classList.remove('active');
                overlay.classList.remove('active');
                cartModal.setAttribute('aria-hidden', 'true');
                document.body.style.overflow = '';
            }

            checkout() {
                if (this.state.cart.length === 0) {
                    Utils.showToast('购物车为空，请先添加商品', 'warning');
                    return;
                }

                const total = this.cartManager.getTotalPrice();
                const itemCount = this.cartManager.getTotalItems();

                if (confirm(`确认结算 ${itemCount} 件商品，总金额 ${Utils.formatPrice(total)}？`)) {
                    // 模拟结算过程
                    Utils.showToast('正在处理订单...', 'info');

                    setTimeout(() => {
                        Utils.showToast(`结算成功！订单金额: ${Utils.formatPrice(total)}`);
                        this.cartManager.clearCart();
                        this.closeCart();
                    }, 1500);
                }
            }

            measurePerformance() {
                // 性能监控
                if ('performance' in window) {
                    window.addEventListener('load', () => {
                        setTimeout(() => {
                            const perfData = performance.getEntriesByType('navigation')[0];
                            const loadTime = perfData.loadEventEnd - perfData.loadEventStart;
                            console.log(`页面加载时间: ${loadTime}ms`);

                            // 可以发送到分析服务
                            if (loadTime > 3000) {
                                console.warn('页面加载时间过长，需要优化');
                            }
                        }, 0);
                    });
                }
            }
        }

        // ===== 全局变量 =====
        let app, cartManager, productRenderer;

        // ===== 应用启动 =====
        document.addEventListener('DOMContentLoaded', () => {
            app = new App();
            cartManager = app.cartManager;
            productRenderer = app.productRenderer;

            // 移除加载动画（如果有）
            const loadingScreen = document.getElementById('loadingScreen');
            if (loadingScreen) {
                setTimeout(() => {
                    loadingScreen.style.opacity = '0';
                    setTimeout(() => loadingScreen.remove(), 300);
                }, 100);
            }
        });

        // ===== 错误处理 =====
        window.addEventListener('error', (e) => {
            console.error('应用错误:', e.error);
            Utils.showToast('应用出现错误，请刷新页面重试', 'error');
        });

        // ===== PWA 支持 =====
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(registration => console.log('SW registered: ', registration))
                    .catch(registrationError => console.log('SW registration failed: ', registrationError));
            });
        }
    </script>
</body>

</html>